<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<style>
    .floatle {
        float: left;
    }
</style>

<body>

    <div class="floatle form-group">
        <button id="addInfo" class="btn btn-info">新增</button>
        <button id="delInfo" class="btn btn-info">删除</button>
        <button id="editInfo" class="btn btn-info">编辑</button>
        <button id="queryInfo" class="btn btn-info">查询</button>
    </div>


    <div class="floatle form-group">
        <input id="querySeq" type="text" style="width:100px;" class="floatle form-control" placeholder="按工号查询"/>
        <input type="text" style="width:100px;" class="floatle form-control" placeholder="按姓名查询"/>
    </div>
    
    <table  class="table table-responsive">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody id="infoList">
            <tr class="info">
                <td><input type="checkbox" /></td>
                <td class="seqNo">1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" /></td>
                <td class="seqNo">1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-1-1</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox" /></td>
                <td class="seqNo">1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>27</td>
                <td>1993-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" /></td>
                <td class="seqNo">1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>26</td>
                <td>1994-1-1</td>
            </tr>
        </tbody>
    </table>

    <!--新增模态框-->
    <div class="modal" data-backdrop="static" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 style="text-align: center;">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="idForm">
                        <div class="form-group form-inline">
                            <label class="control-label">工号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="num" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="name" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="sex" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="password" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">年龄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="age" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">出生日期</label>
                            <input id="birth" type="text" class="form-control"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="saveInfo" class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    
    <!--修改模态框-->
    <div class="modal" data-backdrop="static" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 style="text-align: center;">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="editForm">
                        <div class="form-group form-inline">
                            <label class="control-label">工号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="num1" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="name1" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="sex1" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="password1" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">年龄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input id="age1" type="text" class="form-control"/>
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label">出生日期</label>
                            <input id="birth1" type="text" class="form-control"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="editSaveInfo" class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>

        // 点击新增按钮，进入新增模态框，并初始化表单元素
        $("#addInfo").on("click", function() {
            $("#num").val("");
            $("#name").val("");
            $("#sex").val("");
            $("#password").val("");
            $("#age").val("");
            $("#birth").val("");
            // 展示新增模态框
            $("#addModal").modal("show");
        })

        var flag = false;
        // 新增之后，点击保存按钮
        $("#saveInfo").on("click", function() {
            var num = $("#num").val();
            var name = $("#name").val();
            var sex = $("#sex").val();
            var password = $("#password").val();
            var age = $("#age").val();
            var birth = $("#birth").val();
            var lineClass;
            if (flag) {
                lineClass = "warning";
                flag = !flag;
            } else {
                lineClass = "info";
                flag = !flag;
            }
            var strs = "<tr class='" + lineClass + "'>" + 
                " <td><input type='checkbox' /></td> " +
                " <td> " + num + " </td>" +
                " <td> " + name + "</td> " +
                " <td> " + sex + "</td> " +
                " <td> " + password + "</td> " +
                " <td> " + age + "</td> " +
                " <td> " + birth + "</td> " +
            " </tr> ";
            $("#infoList").append(strs);
            $("#addModal").modal("hide");
        })

        // 点击删除按钮
        $("#delInfo").on("click", function() {
            var flag = $("input[type=checkbox]:checked");
            if(flag.length == 0){
                alert("请选择需要删除的行！");
            } else {
                confirm("确定删除吗？");
                $("input[type=checkbox]:checked").parents("tr").remove();
            }
        })

        // 点击编辑按钮，进入编辑模态框，并回显数据
        $("#editInfo").on("click", function() {
            //var num = $("input[type=checkbox]:checked").parents("tr").children("td:eq(1)").text();
            var flag = $("input[type=checkbox]:checked");
            if(flag.length == 1){
                var num = $("input[type=checkbox]:checked").parent().siblings("td:eq(0)").text();
                var name = $("input[type=checkbox]:checked").parent().siblings("td:eq(1)").text();
                var sex = $("input[type=checkbox]:checked").parent().siblings("td:eq(2)").text();
                var password = $("input[type=checkbox]:checked").parent().siblings("td:eq(3)").text();
                var age = $("input[type=checkbox]:checked").parent().siblings("td:eq(4)").text();
                var birth = $("input[type=checkbox]:checked").parent().siblings("td:eq(5)").text();
                $("#num1").val(num);
                $("#name1").val(name);
                $("#sex1").val(sex);
                $("#password1").val(password);
                $("#age1").val(age);
                $("#birth1").val(birth);
                $("#editModal").modal("show");
            }else {
                alert("只能选择一行！");
            }
        })

        // 编辑之后，点击保存按钮
        $("#editSaveInfo").on("click", function() {
            $("input[type=checkbox]:checked").parent().siblings("td:eq(0)").text($("#num1").val());
            $("input[type=checkbox]:checked").parent().siblings("td:eq(1)").text($("#name1").val());
            $("input[type=checkbox]:checked").parent().siblings("td:eq(2)").text($("#sex1").val());
            $("input[type=checkbox]:checked").parent().siblings("td:eq(3)").text($("#password1").val());
            $("input[type=checkbox]:checked").parent().siblings("td:eq(4)").text($("#age1").val());
            $("input[type=checkbox]:checked").parent().siblings("td:eq(5)").text($("#birth1").val());
            $("#editModal").modal("hide");
        })

        // 点击查询按钮
        $("#queryInfo").click(function(){
            // var querySeqNo = $("#querySeq").val();
            // alert(querySeqNo);
            // var seqNoLists = $(".seqNo").text();
            // alert(seqNoLists.length);
            // for (var i = 0; i < seqNoLists.length; i++) {
            //     if (querySeqNo == seqNoLists[i]) {
            //         alert("找到了");
            //     }
            // }
        })
    </script>
</body>
</html>